<template>
  <aigc-card class="w-full"  header="true" >
    <template #header>
      <div class="w-full">
        <span>
          <el-icon>
            <User />
          </el-icon>
          用户信息
        </span>
      </div>
    </template>

    <el-form :model="user">
      <el-row>
        <el-col>
          <el-form-item label="账号:" prop="name">
            <div class="w-[150px]">
              {{ user.account }}
              <span class="float-right mr-[12px]">
                <el-button size="small" type="primary" @click="changeName">
                  修改
                </el-button>
              </span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="密码:" prop="pwd">
            <div class="w-[150px]">
              <span class="float-right mr-[12px]">
                <el-button size="small" type="primary" @click="changePwd">
                  修改
                </el-button>
              </span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </aigc-card>
  <edit-pwd ref="changePwdInstance"></edit-pwd>
  <edit-name ref="changeNameInstance"></edit-name>
</template>
<script setup lang="ts">
import { useUserStore } from "@/store";
import { reactive, ref } from "vue";
import EditPwd from './editPwd'
import EditName from './editName'
import AigcCard from '@/components/aigcCard'
const changeNameInstance = ref()
const changePwdInstance = ref()
const userStore = useUserStore();
const user = reactive(userStore.user);

const changeName = () => {
  // console.log(changeNameInstance)
  changeNameInstance.value.openDialog(true);
  // console.log("nameClick");
};
const changePwd = () => {
  changePwdInstance.value.openDialog(true);
  console.log("pwdClick");
};
</script>
